<template>
  <div>
    <!-- 默认插槽 -->
    <div class="default-slot">
      <slot></slot>
    </div>

    <!-- 命名插槽 -->
    <div class="named-slot">
      <slot name="header">默认头部内容</slot>
    </div>
    <div class="named-slot">
      <slot name="content">默认内容内容</slot>
    </div>
    <div class="named-slot">
      <slot name="footer">默认底部内容</slot>
    </div>

    <!-- 作用域插槽 -->
    <div class="scoped-slot">
      <slot name="scoped" :user="user">
        <!-- 插槽的默认内容（如果父组件没有提供具名插槽内容） -->
        <p>默认作用域插槽内容: {{ user.name }}</p>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  props: {
    user: {
      type: Object,
      default() {
        return {
          name: 'John Doe',
          age: 30
        }
      }
    }
  },
};
</script>

<style scoped>
.default-slot, .named-slot, .scoped-slot {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}
</style>